<template>
  <el-drawer
    v-model="props.show_role"
    @close="$emit('close')"
    size="60%"
    :close-on-click-modal="false"
  >
    <template #title>
      <h4>权限管理</h4>
    </template>
    <template #default>
      <div class="flex_js">
        <h5>菜单权限</h5>
        <el-button
          type="primary"
          @click=";(show_add_box = true), reset_role_list()"
          >新增菜单</el-button
        >
      </div>
      <el-table
        :data="list"
        class="m_top10"
        max-height="800"
        row-key="id"
        stripe
        border
        lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="icon" label="图标"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="path" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope: any">
            <el-button type="primary" @click="update_list(scope)"
              >修改</el-button
            >
            <el-button @click="delete_list(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-drawer>
  <el-drawer
    v-model="show_add_box"
    @close="reset_form"
    size="50%"
    :close-on-click-modal="false"
  >
    <template #title>
      <h4 v-if="add_form_data.id == ''">新增菜单</h4>
      <h4 v-else>编辑菜单</h4>
    </template>
    <template #default>
      <el-form :model="add_form_data" label-width="100px">
        <el-form-item label="图标">
          <el-input v-model="add_form_data.icon"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="add_form_data.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="add_form_data.platformType" :label="1"
            >平台</el-radio
          >
          <el-radio v-model="add_form_data.platformType" :label="2"
            >企业</el-radio
          >
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-tree-select
            v-model="add_form_data.parentId"
            :data="list"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="add_form_data.path"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="add_form_data.sort"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="add_form_data.type">
            <el-option label="一级菜单" :value="1"></el-option>
            <el-option label="二级菜单" :value="2"></el-option>
            <el-option label="三级菜单" :value="3"></el-option>
            <el-option label="按钮" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <h6>相关权限</h6>
        <el-input
          class="m_top10"
          @input="get_keyword"
          v-model="keyword"
          placeholder="请输入名称关键字"
        ></el-input>
        <el-table
          :data="searc_url_list.length == 0 ? url_list : searc_url_list"
          border
          class="m_20_0"
          style="height: 400px; overflow-y: scroll"
        >
          <el-table-column width="55" label="勾选">
            <template #default="scope: any">
              <el-checkbox v-model="scope.row.checked"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="权限名称"
          ></el-table-column>
          <el-table-column prop="url" label="权限地址"></el-table-column>
        </el-table>
        <div class="tr">
          <el-button type="primary" @click="add_submit">确定</el-button>
          <el-button @click="reset_form">取消</el-button>
        </div>
      </el-form>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
const props = defineProps({
  show_role: {
    type: Boolean,
    default: false,
  },
})
const show_add_box = ref(false)
const add_form_data = ref({
  id: '',
  icon: null,
  isDisplay: 1,
  name: '',
  platformType: 1,
  parentId: null,
  path: null,
  sort: null,
  type: 1,
  routeUrlDealVOList: [],
})
const list = ref([])
const url_list = ref([])
const searc_url_list = ref([])
const keyword = ref()
const get_keyword = (e) => {
  if (e == '') {
    searc_url_list.value = []
  } else {
    for (let i in url_list.value) {
      if (url_list.value[i].title.indexOf(e) != -1) {
        searc_url_list.value.push(url_list.value[i])
      }
    }
  }
}
onMounted(() => {
  get_url_list()
  get_list()
})
const get_url_list = () => {
  axios
    .request({ url: serviceApi.role_url_list, method: 'post' })
    .then((res) => {
      console.log(res)
      url_list.value = res.data
      reset_role_list()
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const get_list = () => {
  axios
    .request({ url: serviceApi.router_list, method: 'post' })
    .then((res) => {
      console.log(res)
      list.value = arrToTree(res.data.reverse())
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const reset_role_list = () => {
  for (let i in url_list.value) {
    url_list.value[i].checked = false
    url_list.value[i].urlId = url_list.value[i].id
  }
}
const update_list = (e) => {
  add_form_data.value = {
    id: e.row.id,
    icon: e.row.icon,
    isDisplay: 1,
    platformType: e.row.platformType ? e.row.platformType : 1,
    name: e.row.name,
    parentId: e.row.parentId,
    path: e.row.path,
    sort: e.row.sort,
    type: parseInt(e.row.type),
    routeUrlDealVOList: e.row.routeUrlDTOList,
  }
  console.log(e, add_form_data.value)
  reset_role_list()
  if (add_form_data.value.routeUrlDealVOList.length) {
    for (let i in add_form_data.value.routeUrlDealVOList) {
      for (let ii in url_list.value) {
        if (
          add_form_data.value.routeUrlDealVOList[i].urlId ==
          url_list.value[ii].id
        ) {
          url_list.value[ii].checked = true
        }
      }
    }
  }
  console.log(url_list.value)
  show_add_box.value = true
}
const add_submit = () => {
  console.log(add_form_data.value)
  for (let i in url_list.value) {
    if (url_list.value[i].checked) {
      add_form_data.value.routeUrlDealVOList.push(url_list.value[i])
    }
  }
  axios
    .request({
      url:
        add_form_data.value.id == ''
          ? serviceApi.router_crud
          : serviceApi.router_crud + '/' + add_form_data.value.id,
      method: add_form_data.value.id == '' ? 'post' : 'put',
      data: add_form_data.value,
    })
    .then((res) => {
      ElMessage.success('操作成功！')
      reset_form()
      get_list()
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const reset_form = () => {
  show_add_box.value = false
  add_form_data.value = {
    id: '',
    icon: null,
    isDisplay: 1,
    name: '',
    platformType: 1,
    parentId: null,
    path: null,
    sort: null,
    type: 1,
    routeUrlDealVOList: [],
  }
}
const delete_list = (e) => {
  ElMessageBox.confirm('确定删除该记录？', '提示', {
    type: 'warning',
    cancelButtonText: '取消',
    closeOnClickModal: false,
    confirmButtonText: '确定',
  })
    .then(() => {
      axios
        .request({
          url: serviceApi.router_crud + '/' + e.row.id,
          method: 'delete',
        })
        .then(() => {
          ElMessage.success('删除成功！')
          get_list()
        })
        .catch((error) => {
          ElMessage.error(error)
        })
    })
    .catch(() => {})
}

const arrToTree = (list) => {
  var map = {}
  var result = []
  list.forEach((item) => {
    map[item.id] = item
  })
  list.forEach((item) => {
    item.label = item.name
    item.value = item.id
    let parent = map[item.parentId]
    if (parent) {
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(item)
    } else {
      result.push(item)
    }
  })
  return result
}
</script>

<style lang="scss" scoped></style>
